<template>
  <div id="share">

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分享收益设置</span>
      </div>
      <div v-for="(item,key) of listdata" :key="key">
        <el-row>
          <el-col :span="12">
            <div class="">
              <!-- <div>公司收益</div> -->
              <div class="grid-content ">{{ item.title }} <div>
                <el-input v-model="item.rewardRate" style="width: 100px;" placeholder="" @input="item.rewardRate=setnumber(item.rewardRate)" /> %</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12" />

        </el-row>
      </div>
      <div>
        <el-row>
          <el-col :span="18">
            &nbsp;
          </el-col>
          <el-col :span="6">
            <div class="grid-content">
              <el-button type="primary" size="min" @click="okseve(listdata)">确定保存</el-button>
            </div>
          </el-col>

        </el-row>
        <!-- <el-divider></el-divider> -->
      </div>

    </el-card>
  </div>
</template>
<script>
import {
  getsharelist,
  setsharelist
} from '@/api/data1.js'
export default {
  name: 'Share',
  data() {
    return {
      params: {
        yw: '',
        gs: ''
      },
      listdata: [
      ]

    }
  },
  mounted() {
    this.getlist()
  },
  methods: {
    setlistdata(arr) {
      const arr1 = [{
        title: '实时投入数量大于等于100，且小于500，拿一代收益的',
        value: '',
        n1: '',
        n2: ''
      },
      {
        title: '实时投入数量大于等于500，且小于1000，拿二代收益的',
        value: '',
        n1: '',
        n2: ''
      },
      {
        title: '实时投入数量大于等于1000，且小于2000，拿三代收益的',
        value: '',
        n1: '',
        n2: ''
      },
      {
        title: '实时投入数量大于等于2000，拿四代收益的',
        value: '',
        n1: '',
        n2: ''
      }
      ]
      for (let i = 0; i < arr.length; i++) {
        arr[i].title = arr1[i].title
        // arr[i].rewardRate = arr[i].rewardRate * 100
      }
      return arr
    },
    setnumber(params) {
      params = params || 0
      if (params == '') {
        return
      }
      params = params.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
      params = params.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
      params = params.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      params = params.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输入两个小数
      if (params.indexOf('.') < 0 && params != '') { // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
        params = parseFloat(params)
      }
      if (params >= 100) {
        params = 100
      }
      if (params < 0) {
        params = 0
      }
      return params
      // console.log(price)
    },

    async getlist() {
      const {
        data,
        code
      } = await getsharelist()

      if (code == 0) {
        this.listdata = this.setlistdata(data)
      }
    },

    async okseve(params) {
      // console.log(params)
      params.forEach(el => {
        // el.rewardRate = el.rewardRate / 100
      })
      // console.log(params)
      // return
      const params1 = {
        shareList: [
          ...params
        ]
      }
      const res = await setsharelist(params1)
      if (res.code == 0) {
        this.getlist()
        this.$message('保存成功')

      }
      // console.log(obj)
      // this.$message('我是确定')
    }
  }
}

</script>
<style lang="scss">
  .box-card {
    width: 97%;
    margin: 0 auto;
    margin-top: 20px;
  }

  #share {
    .listbox {
      /* border-bottom: 1px solid #dddddd56; */
      margin-top: 40px;
    }
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    /* border-radius: 4px;
    min-height: 36px; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>

</style>
